<script setup>
    import { computed } from 'vue';
    import { useStore } from 'vuex';
    import { useRoute, useRouter } from 'vue-router';
    //拿到store实例
    const store = useStore();

    //当前的路由对象
    const route = useRoute();
    // console.log(route);

    //拿到路由实例
    const router = useRouter();

    const selectMenu = computed(() => store.state.menu.selectMenu);

    const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'));
    //点击关闭Tab
    const closeTab = (item, index) => {
        // console.log("item",item);
        store.commit('closeMenu', item)
        //删除非当前页
        if (route.path !== item.path) {
            return
        }
        
        const selectMenuData = selectMenu.value;
        //删除最后一项
        if (index === selectMenuData.length) {
            //如果只有一个元素,则跳转到根目录
            if (!selectMenuData.length) {
                router.push('/')
            } else {
                //删除最后最后一项则向前跳转
                router.push(selectMenuData[index - 1].path)
            }
        } else {
            router.push(selectMenuData[index].path)
        }
    }

    const handleClick = (command) => {
        if (command === 'cancel') {
            localStorage.removeItem('pz_token');
            localStorage.removeItem('pz_userInfo');
            localStorage.removeItem('pz_v3pz');
            window.location.href = window.location.origin;
        }
    }
</script>

<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li class="tab flex-box" :class="{ selected: route.path === item.path }"
                    v-for="(item, index) in selectMenu" :key="item.path">
                    <el-icon size="16">
                        <component :is="item.icon" />
                    </el-icon>
                    <router-link class="text flex-box" :to="{ path: item.path }">
                        {{ item.name }}
                    </router-link>

                    <el-icon class="close" size="14" @click="closeTab(item, index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown @command="handleClick">
                <div class="el-dropdown-link flex-box">
                    <el-avatar class="user-avatar"
                        :src="userInfo.avatar" />
                    <p class="user-name">{{ userInfo.name }}</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
    </div>
</template>

<style lang="less" scoped>
    .flex-box {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        background-color: #fff;
        padding-right: 25px;

        .header-left {
            .icon {
                width: 45px;
                height: 100%;
            }

            .icon:hover {
                cursor: pointer;
                background-color: #e0e0e0;
            }

            .selected {

                a,
                i {
                    color: #409eff;
                }

                background-color: #f5f5f5;
            }

            .tab {
                padding: 0 10px;
                height: 100%;

                .text {
                    margin: 0 5px;
                }

                .close {
                    visibility: hidden;
                }


            }

            .tab:hover {
                background-color: #f5f5f5;

                .close {
                    visibility: initial;
                    cursor: pointer;
                    color: #000;
                }
            }
        }

        .header-right {
            .user-avatar {
                cursor: pointer;
            }

            .user-name {
                margin-left: 10px;
                cursor: pointer;
            }
        }

        a {
            height: 100%;
            color: #333;
            font-size: 15px;
        }
    }
</style>